<template>
  <div class="sear">
    <div class="search_l infinite-list-wrapper" style="overflow:auto;height: 500px;">
      <h3>缩小检索范围</h3>
      <div class="searlist ">
        <h2>图书分类</h2>
        <ul>
          <li>可借图书(4)</li>
          <li>馆藏图书(4)</li>
          <li>所有文献(4)</li>
        </ul>
      </div>
      <div class="searlist">
        <h2>出版时间</h2>
        <ul>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
        </ul>
      </div>
      <div class="searlist">
        <h2>出版时间</h2>
        <ul>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
        </ul>
      </div>
      <div class="searlist">
        <h2>出版时间</h2>
        <ul>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
        </ul>
      </div>
      <div class="searlist">
        <h2>出版时间</h2>
        <ul>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
          <li>2020</li>
        </ul>
      </div>
    </div>

    <div class="search_r">
      <div class="bookface">
        <div>
          <img src="http://www.cxznlibwx.com:8084?isbn=978-7-5157-0711-2" alt="">
        </div>
        <div class="searh3">


          <h3><a href="#">1.醉说三国.三国演义告诉我们的61条真理</a></h3>
          <p>周晓柏编著</p>
          <p>新世界出版社 2011</p>
          <div>
            <el-popover placement="right" width="400" trigger="click">
              <el-table :data="gridData">
                <el-table-column width="150" property="date" label="日期"></el-table-column>
                <el-table-column width="100" property="name" label="姓名"></el-table-column>
                <el-table-column width="300" property="address" label="地址"></el-table-column>
              </el-table>
              <el-button slot="reference">点击收起馆藏</el-button>
            </el-popover>
            <el-button type="primary">点击预约</el-button>
          </div>
        </div>
        <div class="searzhuan">
          <p>专著</p>
          <p>馆藏复本：5</p>
          <p>可借复本：5</p>
        </div>
      </div>

      <div class="bookface" style="margin-top: 10px;">
        <div>
          <img src="http://www.cxznlibwx.com:8084?isbn=978-7-5157-0711-2" alt="">
        </div>
        <div class="searh3">
          <h3><a href="/search/label/0">1.醉说三国.三国演义告诉我们的61条真理</a></h3>
          <p>周晓柏编著</p>
          <p>新世界出版社 2011</p>
          <div>
            <el-popover placement="right" width="400" trigger="click">
              <el-table :data="gridData">
                <el-table-column width="150" property="date" label="日期"></el-table-column>
                <el-table-column width="100" property="name" label="姓名"></el-table-column>
                <el-table-column width="300" property="address" label="地址"></el-table-column>
              </el-table>
              <el-button slot="reference">点击收起馆藏</el-button>
            </el-popover>
            <el-button type="primary">点击预约</el-button>
          </div>
        </div>
        <div class="searzhuan">
          <p>专著</p>
          <p>馆藏复本：5</p>
          <p>可借复本：5</p>
        </div>
      </div>

      <div>
        <span class="demonstration">页数较少时的效果</span>
        <el-pagination layout="prev, pager, next" :total="50">
        </el-pagination>
      </div>
    </div>

  </div>
</template>
<script>
    export default {
        data() {
            return {
                gridData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                count: 10

            }
        },
        created() {
            console.log(this.$route.query.content);
        },
        methods: {

        },
    }
</script>
<style>
    .sear {
        padding: 20px;
        display: flex;
        height: 1500px;
    }

    .search_l {
        flex: 2;
        height: 500px;
    }

    .search_l h3 {
        font-size: 20px;
        font-weight: bold;
    }

    .search_r {
        height: 1500px;
        flex: 5;
        padding-right: 100px;
    }

    .bookface {
        position: relative;
        display: flex;
        width: 1500px;
        height: 109px;
        border-bottom: 1px dotted #e5e5e5;
        padding-bottom: 15px;
        padding-top: 10px;
        background: #f3f3f3;
        box-shadow: 0px 3px 5px #ccc;
        padding: 20px;
    }

    .bookface img {
        width: 55px;
        height: 84px;
    }

    .searh3 {
        width: 450px;
    }

    .searh3 h3 a {
        color: #034581;
        font-weight: bold;
        font-size: 18px;
    }

    .searh3 p {
        padding-right: 10px;
        color: #999;
        font-size: 14px;
    }

    .searh3>div {
        display: flex;
        justify-content: space-around;
    }

    .searh3>div a {
        font-size: 14px;
        color: #3d6e94;
    }

    .searh3 .el-button {
        transform: translate(80px, -24px);
    }

    .searzhuan {
        position: absolute;
        top: 16px;
        right: 100px;
    }

    .searzhuan p {
        color: #999;
        font-size: 14px;
    }

    .searzhuan p:nth-child(1) {
        margin-bottom: 10px;
        font-size: 14px;
        color: #666;
        font-weight: bold;
    }

    .searlist h2 {
        font-size: 20px;
        color: #034581;
    }

    .searlist ul li {
        font-size: 14px;
        line-height: 30px;
        color: #333;
        cursor: pointer;
    }
</style>
